<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>{$data.name}</title>
	<meta charset="UTF-8">
	{include file='common/head' /}
	<link href="__CSS__/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
	<script src="__JS__/layer/layer.js"></script>

</head>
<body>
<div class="container">
{include file='common/top' /}
	<div class="item">
	    <div class="item-banner"></div>
		<div class="contai">
			<span class="f-bk30"></span><span class="f-bk10"></span>
			<div class="item-con">
				<div class="top">
					<div class="pure-g">
						<div class="pure-u-11-24">
							<div class="left">
								<div class="clearfix">
									<a href="{$data.img}" class="jqzoom" rel='2gal1' title="放大镜" id="jqzoom2">
										<img src="{$data.img}" title="triumph" class="imgleft">
									</a>
								</div>
								<em class="fx"><div class="bdsharebuttonbox bdshare-button-style2-24" data-bd-bind="1502680363045"><a href="#" id="bds_more" class="bds_more" data-cmd="more"></a></div>
									<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script></em>
								<span class="f-bk"></span>
							</div>
						</div>
						<div class="pure-u-13-24">
							<div class="right">
								<h1>{$data.name}<small>商品类型：积分商品</small></h1>
								<div class="price">
									<div class="p1">
										<p class="p1-1"><span>{$data.price}</span>积分</p>
									</div>
									<div class="p2">
										<img src="__IMG__/order-ewm2.jpg" alt="{$data.name}">
									</div>
									<div class="p3 f-fr">关注胎大王</div>
									<span class="f-bk3"></span>
								</div>
								<span class="f-bk30"></span>
								<div class="type">
									<table>
										<tr>
											<td>轮胎品牌：{$data.brand=='胎大王'?"<img src='__IMG__/tdw360.png' width='40'/>":$data.brand}</td>
											<td>轮胎规格：{$data.spec}</td>
											<td>轮胎售后：{$data.sanbao}</td>
										</tr>
										<tr>
											<td>轮胎花纹：{$data.huawen}</td>
										</tr>
									</table>
								</div>
								<span class="f-bk30"></span>
								<div class="num">兑换数量 <span class="num1">-</span><input type="text" id="text_box" name="num" value="1"><span class="num2">+</span></div>
								<span class="f-bk30"></span>
								<div class="shop">
									<button type="button" class="sub-cart addMaiCart" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">立即兑换</button>
								</div>
							</div>
						</div>
					</div>
					<div class="item-bg"></div>
				</div>
				<div class="f-bk"></div>
				<div class="goods-parameter">
					<table class="goods-table pure-table pure-table-bordered">
						<tr>
							<td>轮胎品牌</td>
							<td>{$data.brand=='胎大王'?"<img src='__IMG__/tdw360.png' width='80'>":$data.brand}</td>
							<td>轮胎花纹</td>
							<td>{$data.huawen}</td>
							<td>轮胎规格</td>
							<td>{$data.spec}</td>
						</tr>
						<tr>
							<td>轮胎类型</td>
							<td>{$data.category}</td>
							<td>三包售后</td>
							<td>{$data.sanbao}</td>
							<td>适用轮位</td>
							<td>{$data.position}</td>
						</tr>
						<tr>
							<td>适用路况</td>
							<td>{$data.lukuang}</td>
							<td>作业里程</td>
							<td>{$data.mileage}</td>
							<td>轮毂直径</td>
							<td>{$data.diameter}</td>
						</tr>
						<tr>
							<td>断面宽</td>
							<td>{$data.wide}</td>
							<td>花纹深度</td>
							<td>{$data.dept}</td>
							<td>载重指数</td>
							<td>{$data.zaizhong}</td>

						</tr>
						<tr>
							<td>速度级别</td>
							<td>{$data.speed}</td>
							<td>束带层结构</td>
							<td>{$data.daishuceng}</td>
							<td colspan="2"><img src="__IMG__/goods-tdw2.png" alt="轮胎参数"> <span style="font-size:24px;font-family: '黑体';font-weight:bold;"></span></td>
						</tr>
					</table>
					<span class="f-bk30"></span>
				</div>
				<div class="goods-content">
                    {$data.introduction}
                    
                </div>
			</div>
			<span class="f-bk20"></span>
		</div>
	</div>
	
{include file='common/foot' /}
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
      <div class="btn-info modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">请填写收货信息</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="recipient-name" class="control-label">&emsp;联系人:</label>
            <input type="text" class="form-control well" id="modal-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">联系电话:</label>
            <input type="text" class="form-control well" id="modal-phone">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">配送地区:</label>
			<select class="form-control well" style="width:20%;" id="cmbProvince">
			  <option value="">请选择</option>
			</select>
			<select class="form-control well" style="width:20%;display:none;" id="cmbCity">
			</select>
			<select class="form-control well" style="width:20%;display:none;" id="cmbArea">
			</select>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">详细地址:</label>
            <input type="text" class="form-control well" id="modal-address">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">兑换数量:</label>
            <span class="numDown" >&nbsp;-&nbsp;</span>
			<input type="text" class="form-control well" style="width:40px;" id="modal-quantity" value="1" />
			<span class="numUp">&nbsp;+&nbsp;</span>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">兑换产品:</label>
            <input type="text" class="form-control well" id="product-msg" value="{$data.name}" disabled />
          </div>
		  <input type="hidden" name="areaId"  id="areaId" value="" />
		  <input type="hidden" name="productId"  id="productId" value="{$data.id}" />
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary modal-submit">确定</button>
      </div>
    </div>
  </div>
</div>
</div>
{include file='common/back' /}
<script>
$(function(){
	$('.num1').click(function(){
		num = parseInt($('input[name="num"]').val());

		if(num<=1){
			layer.msg("商品数量不能为空",{time:1500});
			$('input[name="num"]').val(1);
			$(this).attr('disabled','disabled');
			return false;
		}else{
			num = num-1;
			$('input[name="num"]').val(num);
		}
	});
	$('.num2').click(function(){
		num = parseInt($('input[name="num"]').val());

		if(num>0){
			num = num+1;
			$('input[name="num"]').val(num);

		}else{
			layer.msg("商品数量不能为空",{time:1500});
			$(this).attr('disabled','disabled');
			return false;
		}
	});
	$(".numDown").each(function() {
		$(this).click(function() {
			var $multi1 = 0;
			var vall1 = $(this).next().val();
			vall1--;
			if(vall1 <= 0) {
				vall1 = 1;
			}
			$(this).next().val(vall1);

		});
	});
	$(".numUp").each(function() {
		$(this).click(function() {
			var $multi = 0;
			var vall = parseInt($(this).prev().val());
			vall++;
			$(this).prev().val(vall);
		});
	});
	$('.sub-cart').click(function(){
		var quantity = $("#text_box").val();
		$("#modal-quantity").val(quantity);
	});
	$('.modal-submit').click(function(){
		$(".modal-submit").attr({"disabled":"disabled"});
		var name = $("#modal-name").val();
		if (name == ''||name==undefined||name==null) {
			layer.msg('请填写联系人',{time:1500});
			$(".modal-submit").removeAttr("disabled"); 
			return false;  
		}
		var mobile = $("#modal-phone").val();
		if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(mobile))) {
			layer.msg('联系电话有误',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}
		var areaId = $("#areaId").val();
		if (areaId == ''||areaId==undefined||areaId==null) {
			layer.msg('请选择配送地区',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}	  
		var address = $("#modal-address").val();
		if (address == ''||address==undefined||address==null) {
			layer.msg('请填写详细地址',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}
		var quantity = $("#modal-quantity").val();
		if (!(/^\d*[1-9]\d*$/.test(quantity)) || parseInt(quantity) <= 0) {
			layer.msg('兑换数量有误',{time:1500});
			$(".modal-submit").removeAttr("disabled");   
			return false; 			
		}
		var productId = $("#productId").val();
		if (productId == ''||productId==undefined||productId==null) {
			layer.msg('提交失败，刷新页面后请重新选择商品',{time:2500});
			$(".modal-submit").removeAttr("disabled");   
			return false;  
		}		
		var productMsg = $("#product-msg").val();
		layer.confirm("您确定要兑换数量为"+quantity+"的"+productMsg+"产品吗？",{btn:['确认','取消']},function(btn){
			$.ajax({
				url: "/Order/integralPost.html",
				type: "POST",
				data: {productId:productId,name:name,mobile:mobile,areaId:areaId,address:address,quantity:quantity},
				dataType: "json",
				cache: false,
				success: function(data) {
					if(data.code==1){
						layer.msg("兑换成功",{time:1500});
						$('#exampleModal').modal('hide');					
					}else{
						layer.msg(data.msg,{time:1500});
						$(".modal-submit").removeAttr("disabled"); 
					}
				}
			});			
		});
	});
	var html='';
	$.ajax({
		url: "/Area/province.html",
		type: "POST",
		data: {},
		dataType: "json",
		cache: false,
		success: function(data) {
			if(data.code==1&&data.data.provinceAarray.length!=0){
				var province = data.data.provinceAarray;
				for(var i=0;i<data.data.provinceAarray.length;i++){
					html+='<option value="'+province[i].id+'">'+province[i].name+'</option>';
				}
				$("#cmbProvince").append(html); 					
			}else{
				layer.msg("省份获取失败，请重试",{time:1500});
			}

		}
	});
	
	$("#cmbProvince").change(function(){
		var id=$(this).children('option:selected').val();
		var cityhtml="<option value=''>请选择</option>";
		var countyhtml="";
		if(id==''||id==undefined||id==null){
			$("#cmbCity").hide();
			$("#cmbArea").hide();
			return false;
		}
		$.ajax({
			url: "/Area/city.html",
			type: "POST",
			data: {id:id},
			dataType: "json",
			cache: false,
			success: function(data) {
				if(data.code==1&&data.data.cityArray.length!=0){
					var cityArray = data.data.cityArray;
					for(var i=0;i<data.data.cityArray.length;i++){
						cityhtml+='<option value="'+cityArray[i].id+'">'+cityArray[i].name+'</option>';
					}
					$("#areaId").val("");
					$("#cmbCity").show();
					$("#cmbArea").hide();
					$("#cmbCity").html(cityhtml); 					
					$("#cmbArea").html(countyhtml); 					
				}else{
					layer.msg("城市获取失败，请重试",{time:1500});
				}
			}
		});	
	});	
	$("#cmbCity").change(function(){
		var id=$(this).children('option:selected').val();
		var countyhtml="<option value=''>请选择</option>";
		$.ajax({
			url: "/Area/county.html",
			type: "POST",
			data: {id:id},
			dataType: "json",
			cache: false,
			success: function(data) {
				if(data.code==1&&data.data.countyArray.length!=0){
					var countyArray = data.data.countyArray;
					for(var i=0;i<data.data.countyArray.length;i++){
						countyhtml+='<option value="'+countyArray[i].id+'">'+countyArray[i].name+'</option>';
					}
					$("#areaId").val("");
					$("#cmbArea").show();
					$("#cmbArea").html(countyhtml); 					
				}else if(data.data.countyArray.length==0){
					$("#cmbArea").html(countyhtml);
					$("#areaId").val(id);
				}else{
					
				}
			}
		});	
	});
	$("#cmbArea").change(function(){
		var id=$(this).children('option:selected').val();
		$("#areaId").val(id);
	}); 
});
</script>
<script src="__JS__/jquery.cookie.js"></script>
<script>
$(function(){
	var userInfo = $.cookie('userInfo');
	if(userInfo!=null){
		$(".indexLogin").css("display","none");
		$(".memberLogin").css("display","block");
		var str = userInfo.replace(/^think:/,'');
		userInfo = JSON.parse(str);
		//console.log(JSON.parse(str));
		$(".memberLogin .memberPhone").text(userInfo['username']);
	}else{
		$(".indexLogin").css("display","block");
		$(".memberLogin").css("display","none");
	}

});
</script>
</body>
</html>